<template>
  <div>
    <el-row class="tigan">
      试题题干：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.subjectEditorValue" :height="200" />
      </div>
    </el-row>
    <el-row>
      试题答案：
      <div class="editorBox">
        <!-- <TinymceEditor
              ref="editor"
              v-model="modelValue.answerEditorValue"
              :height="100"
            /> -->
        <mistackChange v-model="modelValue.mistakeAnswer" :subjectEditorValue = 'modelValue.subjectEditorValue'></mistackChange>
      </div>
    </el-row>
    <el-row class="mt20">
      &nbsp;关&nbsp;键&nbsp;字：
      <div class="editorBox">
        <el-select v-model="modelValue.keyList" multiple filterable allow-create default-first-option
          :reserve-keyword="false" placeholder="回车输入关键字...">
          <el-option v-for="item in modelValue.keyList" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
    </el-row>
    <el-row style="border-top: 1px dashed #dcdfe8;;padding-top:10px;margin-top:20px;">
      <el-col :span="4">
        <el-button type="primary" :icon="Plus" text @click="addAnalysis">添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row v-if="modelValue.explainEditorShow || modelValue.explainEditorValue.length > 0" class="jiexi2">
      试题解析：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.explainEditorValue" :height="80" />
      </div>
    </el-row>
  </div>
</template>
<script setup>
import {
  Plus,
} from '@element-plus/icons-vue'
import TinymceEditor from '../component/Editor/index.vue'
import mistackChange from './mistackChange.vue';
import { getCurrentInstance, toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  },
})
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow
  props.modelValue.explainEditorValue = ''
}


// watch(() => props.modelValue.subjectEditorValue,
//   (newValue) => {

//   }, {})


watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
</script>
  
<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tigan {
  border-bottom: 1px dashed #dcdfe8;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
</style>